<style scoped>
.home-screen {
  position: relative;
  transform: translateY(-60px);
}
.home-screen img {
  max-width: 100%;
  min-height: 100%;
}
.home-screen .bg {
  background-image: url("../../../static/Images/new/bg.jpg");
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  background-color: #8b8b8b;
  left: 0;
  top: 0;
}
.home-screen .mask {
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  background-color: #3b3b3b;
  opacity: 0.5;
  left: 0;
  top: 0;
}

.content,
.flow,
.cases,
.tools {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}

.content {
  min-height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: white;
}
.content .title {
  font-size: 4.8rem;
  /* font-size: 3.8rem; */
  font-family: Georgia, sans-serif, serif;
}
.content .sub-title {
  margin: 1rem;
  display: block;
  font-size: 1.6rem;
  font-family: sans-serif, serif;
}
.content .desc {
  margin: 1rem;
  font-size: 1.2rem;
  display: block;
}
.content .home-start-btn {
  margin: 1rem;
  font-size: 1rem;
  border-radius: 6px;
}
.content2 {
  min-height: 400px;
  min-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: white;
}
.blue {
  border-color: #5cadff;
  color: #5cadff;
}

.green {
  border-color: #19be6b;
  color: #19be6b;
}

.yellow {
  border-color: #ff9900;
  color: #ff9900;
}

.tools {
  padding: 2rem 0 5rem 0;
}
.tools .tools-title {
  display: block;
  font-family: Georgia, sans-serif, serif;
  font-size: 2.5rem;
  padding: 1rem 0 3rem 0;
}
.tools .tools-container {
  min-height: 350px;
}
.tools .tools-container .card {
  border-top-right-radius: 10px;
  position: relative;
  border: solid 1px #161a1d44;
  overflow: hidden;
  text-align: left;
}
.tools .tools-container .card .bg {
  display: block;
  width: 100%;
  height: 150px;
  background-size: cover;
  position: relative;
  left: 0;
  right: 0;
}
.tools .tools-container .card .img-map {
  background-image: url("../../../static/Images/new/map.jpg");
}
.tools .tools-container .card .img-chart {
  background-image: url("../../../static/Images/new/chart.jpg");
}
.tools .tools-container .card .img-video {
  background-image: url("../../../static/Images/new/video.jpg");
}
.tools .tools-container .card .img-edit {
  background-image: url("../../../static/Images/new/edit.jpg");
}
.tools .tools-container .card .img-todo {
  background-image: url("../../../static/Images/new/notes.jpg");
}
.tools .tools-container .card .card-title {
  display: block;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  padding: 1rem 1rem;
  font-size: 1.4rem;
}
.tools .tools-container .card .card-desc {
  display: block;
  padding: 0.5rem 1rem;
}
.tools .tools-container .card a {
  display: inline-block;
  margin: 2rem 1rem;
}

.cases .case-title {
  display: block;
  font-family: Georgia, sans-serif, serif;
  font-size: 2.5rem;
  padding: 1rem 0 3rem 0;
}
.cases .case-content {
  min-height: 500px;
}
.cases .case-content .case-item {
  min-height: inherit;
  position: relative;
}
.cases .case-content .case-item .case-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.cases .case-content .case-item .img1 {
  background-image: url("../../../static/Images/new/planet.jpg");
}
.cases .case-content .case-item .img2 {
  background-image: url("../../../static/Images/new/fire.jpg");
}
.cases .case-content .case-item .img3 {
  background-image: url("../../../static/Images/new/leaft1.jpg");
}
.cases .case-content .case-item .mask .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #161a1d;
  opacity: 0.5;
  color: white;
  transition: all 0.6s 0s cubic-bezier(0.02, 0.67, 0.45, 0.93);
}
.cases .case-content .case-item .mask .bg:hover {
  background-color: #5cadff;
  opacity: 0.9;
}
.cases .case-content .case-item .mask .bg:hover + .case-text {
  opacity: 1;
  transform: translate3d(-50%, -60%, 0);
}
.cases .case-content .case-item .mask .case-text {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  transition: all 0.6s 0s cubic-bezier(0.02, 0.67, 0.45, 0.93);
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: white;
  opacity: 0.7;
}
.cases .case-content .case-item .mask .case-text i {
  font-size: 6rem;
}
.cases .case-content .case-item .mask .case-text div {
  font-size: 1.2rem;
}

.flow {
  margin: 5rem auto;
  width: 80%;
}
.flow2 {
  margin: 10rem auto;
  width: 70%;
}
.flow2-left {
  width: 100%;
  background-color: #e8eaec;
}
.flow3 {
  margin: 6rem auto;
  padding: 7rem 0;
  width: 70%;
}
.flow .flow-content .flow-title {
  font-family: Georgia, sans-serif, serif;
  font-size: 2.5rem;
  padding: 1rem 0 3rem 0;
}
.flow .flow-content .flow-line {
  background: linear-gradient(left, #5cadff, #5cadff);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 0.4rem;
}
.flow .flow-content .flow-item-container {
  margin: 5rem 0 0;
  display: flex;
  justify-content: space-around;
}
.flow .flow-content .flow-item-container .flow-item {
  z-index: 10;
  display: inline-block;
  vertical-align: middle;
  color: #161a1dc0;
}
.flow .flow-content .flow-item-container .flow-item .flow-item-icon {
  display: inline-block;
  padding: 2rem 3rem;
  font-size: 4.5rem;
  position: relative;
}
.flow .flow-content .flow-item-container .flow-item .flow-item-icon:hover {
  transform: translate3d(-50%, -55%, 0);
}
.flow .flow-content .flow-item-container .flow-item .flow-item-icon {
  transition: all 0.4s 0s cubic-bezier(0.02, 0.67, 0.45, 0.93);
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  border: solid 1px #5cadff;
  border-radius: 10px;
  z-index: -1;
}
.flow .flow-content .flow-item-container .flow-item .flow-item-text {
  padding: 1rem 0;
  font-size: 1.2rem;
  display: block;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
[v-cloak] {
  display: none;
}
.flow-title {
  font-size: 20px;
}
[v-cloak] {
  display: none;
}
.picscreen {
  position: relative;
}

.picbg {
  background-image: url("../../assets/images/projectlist_1.jpg");
  background-size: cover;
  position: absolute;
  height: 100px;
  width: 100%;
  background-color: #8b8b8b;
  top: -15px;
  left: 0;
}

.pictitle {
  font-size: 1.4rem;
  font-family: Georgia, sans-serif, serif;
}

.picdesc {
  font-size: 0.9rem;
  display: block;
}

.picTag {
  margin-right: 30px;
  background-color: #608ebded;
  color: white;
  padding: 5px;
  cursor: pointer;
  /*border: 1px solid #e8eaec;*/
  border-radius: 4px;
}

.project-input {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 5%;
  width: 400px;
}

.search-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* font-size: 0.5rem; */
  width: 100px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
}

.project-start-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  right: 20px;
  position: absolute;
  /* font-size: 0.5rem; */
  border-radius: 6px;
  width: 150px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/*Tabs--style*/
.tabs {
  min-height: 500px;
  border-top: 1px solid lightgrey;
}

.tabpane-syle {
  font-size: 20px;
  background-color: rgba(133, 115, 92, 0.1);
  min-height: 500px;
}

.ivu-tabs-bar {
  /*border-bottom: 1px solid #dddee1;*/
  margin-bottom: 0px;
}

.ivu-tabs-nav-wrap {
  text-align: center;
  margin-bottom: 0px;
}

.ivu-tabs-nav-scroll {
  margin-left: 5%;
}

.ivu-tabs-tab {
  font-size: 16px;
  font-weight: bold;
}

.ivu-row {
  margin-bottom: 45px;
}

.pro-page {
  bottom: 75px;
  left: 43%;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

.pro-content {
  margin-top: 100px;
}
img {
  width: 100%;
  height: auto;
}

.projectTitle {
  height: 16px;
  line-height: 15px;
  font-size: 16px;
  max-width: 150px;
  padding-left: 5px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardicon {
  height: 15px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.index-services-container h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  color: #17233d;
}
.index-shadow {
  margin: 64px 0 0;
}
.ivu-row,
.ivu-row:after,
.ivu-row:before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ivu-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
.ivu-text-center {
  text-align: center;
}
</style>
<template>
  <div id="vueBody" v-cloak style="min-width: 1100px">
    <div class="home-screen">
      <div class="bg"></div>
      <div class="mask"></div>
      <div class="content">
        <div>
          <!-- <span class="title">空间数据可视化 - 课程特色资源库</span> -->
          <span class="title">参与式课程平台</span>
          <!-- <span class="sub-title"
            >图像和视频可视化 | 符号和材料库 | 在线可视化 |
            课程、工具和文献</span
          > -->
          <span class="sub-title"
            >课程、工具和文献 | 在线交流与协作 | 文本、图像、音频、视频、地图、图表</span
          >
          <!-- <span class="desc">
                      该平台提供各种空间数据资源的可视化，研究人员可以在这里交换意见，<br /> 碰撞他们的思想，建立他们的合作。</span>
                   <i-button class="home-start-btn" @click="start">Try it now</i-button> -->
        </div>
      </div>
    </div>
    <div class="index-services-container">
      <h3>主题模块</h3>
      <el-row class="ivu-row index-shadow ivu-text-center">
        <el-col :span="4" :offset="3">
          <div class="index-shadow-img">
            <img
              style="height: 180px; width: 180px"
              src="https://file.iviewui.com/view-design-dist/img/icon-code.2d0be7e4.png"
            />
          </div>
          <h4>知识库</h4>
          <!-- <p>
            购买后交付源码，客户可根据自身项目情况进行二次开发，较高的灵活性和易用性
          </p> -->
        </el-col>
        <el-col :span="4" :offset="1">
          <div class="index-shadow-img">
            <img
              style="height: 180px; width: 180px"
              src="https://file.iviewui.com/view-design-dist/img/icon-auth.dacfd4b2.png"
            />
          </div>
          <h4>课程资源</h4>
          <!-- <p>
            授权后永久有效，企业版以上不限制项目数，一次购买多次使用，成本递减
          </p> -->
        </el-col>
        <el-col :span="4" :offset="1">
          <div class="index-shadow-img">
            <img
              style="height: 180px; width: 180px"
              src="https://file.iviewui.com/view-design-dist/img/icon-service.0b80c55a.png"
            />
          </div>
          <h4>班级管理</h4>
          <!-- <p>
            完善的技术文档 +
            专业的技术专家支持（2年服务时间，工作日10:00-18:00）
          </p> -->
        </el-col>
        <el-col :span="4" :offset="1">
          <div class="index-shadow-img">
            <img
              style="height: 180px; width: 180px"
              src="https://file.iviewui.com/view-design-dist/img/icon-store.6e0f5a53.png"
            />
          </div>
          <h4>作业管理</h4>
          <!-- <p>企业版及以上客户，永久免费使用全部物料</p> -->
        </el-col>
      </el-row>
    </div>
    <div class="main-container" style="margin-top: 30px; margin-bottom: 50px">
      <!-- <div class="flow2">
          <div class="section-content" style="text-align: left;">
              <div :gutter="40" class="system-content el-row">
                  <div class="el-col el-col-12">
                      <div class="content-title" style="margin-top:30px;">
                          <h1>作品展示</h1>
                      </div>
                      <h2 class="content-content margin-right-30" style="width: 80%;margin-top: 32px;">
                        优秀空间数据可视化作品展示模块。在该模块，你可以查看平台上展示的不同类型的优秀作品，同时在该模块中还提供了评论与可视化作品标注功能，可以在欣赏作品的过程中对作品进行相关的提问与讨论。
                      </h2>
                      <el-button type="warning" style="margin-top: 32px"
                                @click="toWork()">查看详情
                      </el-button>
                  </div>
                  <div class="el-col el-col-12">
                      <img src="@/assets/images/workShow.png"
                          style="width:100%; height: 320px;border-radius:20px;border: solid 1px;padding:1px;" alt="foresty">
                  </div>
              </div>
        </div>
      </div> -->
      <!-- <h3 >主题模块</h3> -->
      <div class="flow2-left">
        <div class="flow3">
          <div class="section-content" style="text-align: right">
            <div :gutter="40" class="system-content el-row">
              <div class="el-col el-col-12">
                <img
                  src="@/assets/images/resourceLibrary.png"
                  style="
                    width: 100%;
                    height: 320px;
                    border-radius: 20px;
                    border: solid 1px;
                    padding: 1px;
                  "
                  alt=""
                />
              </div>
              <div class="el-col el-col-12">
                <div class="content-title" style="margin-top: 40px">
                  <h1>资源库</h1>
                </div>
                <h2
                  class="content-content margin-left-30"
                  style="width: 90%; margin-top: 32px; float: right"
                >
                  空间数据可视化资源库。资源数据库中包含了符号库、素材库、慕课资源库、可视化网站、可视化工具、文献资源库6个部分，并且提供了关键字搜索和在线预览功能,你可以对需要的资源进行预览和下载。
                </h2>
                <el-button type="warning" style="margin-top: 32px" @click="toResource()"
                  >查看详情
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flow2">
        <div class="section-content" style="text-align: left">
          <div :gutter="40" class="system-content el-row">
            <div class="el-col el-col-12">
              <div class="content-title" style="margin-top: 40px">
                <h1>课程管理</h1>
              </div>
              <h2
                class="content-content margin-right-30"
                style="width: 82%; margin-top: 32px"
              >
                课程管理模块。在该模块，你可以加入你所属的课程，在相关课程页面内部，提供课程的详细信息介绍、课程的进度、作业发布、相关资源下载等功能。
              </h2>
              <el-button type="warning" style="margin-top: 32px" @click="toClass()"
                >查看详情
              </el-button>
            </div>
            <div class="el-col el-col-12">
              <img
                src="@/assets/images/classManage.png"
                style="
                  width: 100%;
                  height: 320px;
                  border-radius: 20px;
                  border: solid 1px;
                  padding: 1px;
                "
                alt="foresty"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
export default {
  data() {
    return {
      // userInfo:[],
      projectList: [
        {
          aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
          name: "优秀作品",
          description: "123",
          purpose: "Data visualization",
          creator: "0743e9c0-6f02-411c-8b5c-0fcdccaf2eaf",
          members: [
            { role: "manager", userId: "0743e9c0-6f02-411c-8b5c-0fcdccaf2eaf" },
            { role: "expert", userId: "01422e09-9fe3-40ea-a777-5aa6d7c0a696" },
          ],
          type: "Activity_Group",
          parent: null,
          children: [
            "31344a34-18fa-4e72-978c-a8ed8d25df59",
            "fd9b0114-5016-4417-bf3a-a73dafa95b76",
            "220c1ed9-8297-465c-9b7f-5ea467237a12",
            "c4dc1e23-f965-45df-b1ad-cff1e20ffae8",
          ],
          permission:
            '{"observe":{"manager":null,"coreteam":null,"widerteam":null,"visitor":"No"},"auto_join":{"manager":null,"coreteam":null,"widerteam":null,"visitor":"No"},"edit_info":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"invite_member":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_member":{"manager":true,"coreteam":false,"widerteam":false,"visitor":null},"create_task":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"manage_task":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"upload_resource":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"use_resource":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_resource":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"manage_workspace_type":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"import_tool":{"manager":true,"coreteam":true,"widerteam":false,"visitor":null},"use_tool":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_tool":{"manager":true,"coreteam":false,"widerteam":false,"visitor":null},"manage_child_activity":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null}}',
          level: 0,
          createdTime: "2021-08-09 10:18:34",
          activeTime: "2021-10-30 14:18:04",
          toolList: null,
          privacy: "Public",
          tag: "GIS \u0026 RS,Human,workplace",
          picture: "",
          category: "Educational",
        },
      ],
      currentProjectList: this.projectList,
      projectType: [],
      currentTab: "All",
      //初始化信息总条数
      //projectCount:10,
      contentMinHeight: 0,
      currentPage: 1,
      totalCount: this.count,
      //每页显示多少条
      pageSize: 18,
      tabPageData: this.projectList,
      tabPaneType: [
        { label: "All", name: "All", icon: "icon ion-md-list" },
        {
          label: "Investigational",
          name: "Investigational",
          icon: "icon ion-md-globe",
        },
        {
          label: "Intercomparable",
          name: "Intercomparable",
          icon: "icon ion-md-git-compare",
        },
        {
          label: "Reproducible",
          name: "Reproducible",
          icon: "icon ion-ios-copy",
        },
        {
          label: "Educational",
          name: "Educational",
          icon: "icon ion-ios-paper",
        },
      ],
      projectCatalog: [
        {
          name: "All projects",
          introduction:
            "All different types of are listed here, including investigational projects, intercomparable projects, reproducible projects, and educational projects. Select the project that you need.",
          tags: [],
        },
        {
          name: "Investigational projects",
          introduction:
            "Understanding geographic scales and boundaries, clarifying geographic elements, analyzing geographic phenomena, and simulating geographic processes.",
          tags: [
            "Terrestrial",
            "Coastal",
            "Marine",
            "Climate",
            "Ecological",
            "Geological",
            "Human",
            "GIS & RS",
            "General",
          ],
        },
        {
          name: "Intercomparable projects",
          introduction:
            "Participatory Intercomparison (PIC) projects can be conducted in an open, configurable and reproducible manner.",
          tags: [],
        },
        {
          name: "Reproducible projects",
          introduction: "Reproducible projects",
          tags: [],
        },
        {
          name: "Educational projects",
          introduction: "Educational projects",
          tags: [],
        },
      ],
      selectCatalog: {
        name: "All projects",
        introduction:
          "All different types of are listed here, including investigational projects, intercomparable projects, reproducible projects, and educational projects. Select the project that you need.",
        tags: [],
      },
      // user
      userInfo: [],
      userState: false,
      freshEle: 0,
      searchText: "",
      selectTag: "",
    };
  },
  components: {
    Avatar,
  },
  created() {},
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  methods: {
    toRegister() {
      window.location.href = "/register";
    },
    toCreate() {
      window.location.href = "/newProject";
    },
    toTeam() {
      window.location.href = "/projectList";
    },
    toDemo() {
      window.location.href = "/projectList";
    },
    toWork() {
      this.$router.push({ name: "projectList" });
    },
    toResource() {
      this.$router.push({ name: "SymbolLibrary" });
    },
    toClass() {
      this.$router.push({ name: "classList" });
    },
  },
};
</script>
